<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>

<body>
  <div id="app">
    <el-row>
      <el-col :span="8" v-for="(info, host) of gpu_data">
        <el-card class="gpu_card">
          <div class="gpu_infos">
            <h2>{{ info.host }}</h2>
            <p>{{ info.ip }}</p>
            <p class="time">{{ info._date }}</p>
            <!-- {{info.gpu_info}} -->
          </div>
          <div v-for="(gpu, gpu_index) of info.gpu_info" class="gpu_info">
            <hr/>
              <el-tag class="ml-2" type="warning" style="margin-bottom:10px;">{{gpu.name}}</el-tag>
              <el-progress :percentage="gpu.percentage" :stroke-width="20" :text-inside="true" ></el-progress> 
              <div style="margin-top: 10px;"></div>
              <!-- <hr/> -->
              <el-tag class="ml-2" >cuda:{{ gpu_index }}</el-tag>
              <el-tag class="ml-2" type="success">{{ gpu.status }}</el-tag>
              <el-tag class="ml-2" type="danger">{{ gpu.gpu }} %</el-tag>
            <hr/>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</body>
<!-- import Vue before Element -->
<style>
  body {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }

  a {
    text-decoration: none
  }

  .time {
    font-size: 13px;
    color: #999;
  }

  .gpu_card {
    margin: 15px;
    text-align: center;
  }

  .gpu_info {
    margin: 15px;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
<!-- <script src="https://unpkg.com/vue/dist/vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      gpu_data: []
    },
    methods: {
      getActMap: function () {
        this.gpu_data = []
        let url = 'api/act_gpu'
        $.get(url, res => {
          this.gpu_data = Object.assign({}, this.gpu_data, JSON.parse(res))
        }
        )
      }
    },
    mounted() {
      this.getActMap()
      setInterval(this.getActMap, 30*1000)
    }
  })
</script>

</html>
